@use './variables.scss' as *;

// ==================== 响应式混合 ====================
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (min-width: 640px) { @content; }
  } @else if $breakpoint == 'md' {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == 'lg' {
    @media (min-width: 1024px) { @content; }
  } @else if $breakpoint == 'xl' {
    @media (min-width: 1280px) { @content; }
  } @else if $breakpoint == '2xl' {
    @media (min-width: 1536px) { @content; }
  }
}

// ==================== Flexbox 混合 ====================
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

// ==================== 文本省略 ====================
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// ==================== 过渡动画 ====================
@mixin transition($properties...) {
  transition-property: $properties;
  transition-duration: $transition-base;
  transition-timing-function: $transition-ease;
}

// ==================== 卡片样式 ====================
@mixin card {
  background: var(--bg-primary);
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  padding: $spacing-lg;
  @include transition(transform, box-shadow);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-xl;
  }
}

// ==================== 渐变背景 ====================
@mixin gradient-bg($angle: 135deg) {
  background: linear-gradient($angle, $primary-color, $secondary-color);
}

// ==================== 玻璃态效果 ====================
@mixin glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

